<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>激光汇聚成爱心</title>
  <style>
    canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
<canvas id="heart"></canvas>
<script>
  window.requestAnimationFrame =
          window.__requestAnimationFrame ||
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          (function () {
            return function (callback, element) {
              var lastTime = element.__lastTime;
              if (lastTime === undefined) {
                lastTime = 0;
              }
              var currTime = Date.now();
              var timeToCall = Math.max(1, 33 - (currTime - lastTime));
              window.setTimeout(callback, timeToCall);
              element.__lastTime = currTime + timeToCall;
            };
          })();
  window.isDevice =
          /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
                  (
                          navigator.userAgent ||
                          navigator.vendor ||
                          window.opera
                  ).toLowerCase()
          );
  var loaded = false;
  var init = function () {
    if (loaded) return;
    loaded = true;
    var mobile = window.isDevice;
    var koef = mobile ? 1.5 : 1;
    var canvas = document.getElementById('heart');
    var ctx = canvas.getContext('2d');
    var width = (canvas.width = koef * innerWidth);
    var height = (canvas.height = koef * innerHeight);
    var rand = Math.random;
    ctx.fillStyle = 'rgba(0,0,0,1)';
    ctx.fillRect(0, 0, width, height);

    var heartPosition = function (rad) {
      return [
        Math.pow(Math.sin(rad), 3),
        -(
                15 * Math.cos(rad) -
                5 * Math.cos(2 * rad) -
                2 * Math.cos(3 * rad) -
                Math.cos(4 * rad)
        ),
      ];
    };
    var scaleAndTranslate = function (pos, sx, sy, dx, dy) {
      return [dx + pos[0] * sx, dy + pos[1] * sy];
    };

    window.addEventListener('resize', function () {
      width = canvas.width = koef * innerWidth;
      height = canvas.height = koef * innerHeight;
      ctx.fillStyle = 'rgba(0,0,0,1)';
      ctx.fillRect(0, 0, width, height);
    });

    var traceCount = 50;
    var pointsOrigin = [];
    var i;
    var dr = 0.1;
    for (i = 0; i < Math.PI * 2; i += dr)
      pointsOrigin.push(
              scaleAndTranslate(heartPosition(i), 105, 6.5, 0, 0)
      ); // 修改比例参数
    for (i = 0; i < Math.PI * 2; i += dr)
      pointsOrigin.push(scaleAndTranslate(heartPosition(i), 75, 4.5, 0, 0)); // 修改比例参数
    for (i = 0; i < Math.PI * 2; i += dr)
      pointsOrigin.push(scaleAndTranslate(heartPosition(i), 45, 2.5, 0, 0)); // 修改比例参数
    var heartPointsCount = pointsOrigin.length;

    var targetPoints = [];
    var pulse = function (kx, ky) {
      for (i = 0; i < pointsOrigin.length; i++) {
        targetPoints[i] = [];
        targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;
        targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;
      }
    };

    var e = [];
    for (i = 0; i < heartPointsCount; i++) {
      var x = rand() * width;
      var y = rand() * height;
      e[i] = {
        vx: 0,
        vy: 0,
        R: 2,
        speed: rand() + 5,
        q: ~~(rand() * heartPointsCount),
        D: 2 * (i % 2) - 1,
        force: 0.2 * rand() + 0.7,
        f:
                'hsla(0,' +
                ~~(40 * rand() + 60) +
                '%,' +
                ~~(60 * rand() + 20) +
                '%,.3)',
        trace: [],
      };
      for (var k = 0; k < traceCount; k++) e[i].trace[k] = { x: x, y: y };
    }

    var config = {
      traceK: 0.4,
      timeDelta: 0.01,
    };

    var time = 0;
    var loop = function () {
      var n = -Math.cos(time);
      pulse((1 + n) * 0.5, (1 + n) * 0.5);
      time +=
              (Math.sin(time) < 0 ? 9 : n > 0.8 ? 0.2 : 1) * config.timeDelta;
      ctx.fillStyle = 'rgba(0,0,0,.1)';
      ctx.fillRect(0, 0, width, height);
      for (i = e.length; i--; ) {
        var u = e[i];
        var q = targetPoints[u.q];
        var dx = u.trace[0].x - q[0];
        var dy = u.trace[0].y - q[1];
        var length = Math.sqrt(dx * dx + dy * dy);
        if (10 > length) {
          if (0.95 < rand()) {
            u.q = ~~(rand() * heartPointsCount);
          } else {
            if (0.99 < rand()) {
              u.D *= -1;
            }
            u.q += u.D;
            u.q %= heartPointsCount;
            if (0 > u.q) {
              u.q += heartPointsCount;
            }
          }
        }
        u.vx += (-dx / length) * u.speed;
        u.vy += (-dy / length) * u.speed;
        u.trace[0].x += u.vx;
        u.trace[0].y += u.vy;
        u.vx *= u.force;
        u.vy *= u.force;
        for (k = 0; k < u.trace.length - 1; ) {
          var T = u.trace[k];
          var N = u.trace[++k];
          N.x -= config.traceK * (N.x - T.x);
          N.y -= config.traceK * (N.y - T.y);
        }
        ctx.fillStyle = u.f;
        for (k = 0; k < u.trace.length; k++) {
          ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);
        }
      }

      window.requestAnimationFrame(loop, canvas);
    };
    loop();
  };

  var s = document.readyState;
  if (s === 'complete' || s === 'loaded' || s === 'interactive') init();
  else document.addEventListener('DOMContentLoaded', init, false);
</script>
</body>
</html>
